<%--
  Created by IntelliJ IDEA.
  User: zhl
  Date: 2021/8/12
  Time: 14:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>shop</title>
    <style type="text/css">
        img{width:200px;height:200px;}

    </style>

</head>
<body>
    <jsp:include page="../../common/css_js.jsp"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/jq/jquery.dataTables.min.css">
    <script src="<%=path%>/static/jq/jquery.dataTables.min.js"></script>
    <div class="container">
        <h3>商品管理</h3>
        <a class="btn btn-success" href="javascript:" onclick="add()">添加</a>
        <a class="btn btn-success" href="${pageContext.request.contextPath}/goods/getAllByPage">返回商品页面</a>
        <table class="table" id="table_id_example">
            <thead>
                <tr>
                    <td>商品编号</td>
                    <td>商品</td>
                    <td>商品价格</td>
                    <td>商品图片</td>
                    <td>商品分类</td>
                    <td>商品种类</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${goodsList}" var="one">
                    <tr id="b_${one.goodsId}">
                        <td class="goodsId">${one.goodsId}</td>
                        <td class="goodsName">${one.goodsName}</td>
                        <td class="price">${one.price}</td>
                        <td class="pImage"><img src="${pageContext.request.contextPath}${one.pImage}.png"></td>
                        <td class="pDesc">${one.pDesc}</td>
                        <td class="category">${one.category}</td>
                        <td class="state">${one.state}</td>
                        <td>
                            <a class="btn btn-info btn-sm" href="javascript:" onclick="edit('${one.goodsId}')">修改</a>&nbsp
                            <a class="btn btn-danger btn-sm" href="javascript:" onclick="delGoods('${one.goodsId}')">删除</a>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>


        <%--    添加商品的模态框--%>
        <div class="modal fade" id="dealModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">添加商品</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <form id="editForm1" method="post" onsubmit="return false;">
                            <div class="form-group">
                                <label>商品编号</label>
                                <input type="text" name="goodsId" id="goodsId" class="form-control" readonly>
                            </div>
                            <div class="form-group">
                                <label>商品</label>
                                <input type="text" name="goodsName" id="goodsName"  class="form-control">
                            </div>
                            <div class="form-group">
                                <label>商品价格</label>
                                <input type="text" name="price" id="price" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>商品图片</label>
                                <input type="text" name="pImage" id="pImage" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>商品分类</label>
                                <input type="text" name="pDesc" id="pDesc" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>商品种类</label>
                                <input type="text" name="category" id="category" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>商品数量</label>
                                <input type="text" name="state" id="state" class="form-control">
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="doDeal()">提交</button>
                    </div>

                </div>
            </div>
        </div>

        <%--    修改商品--%>
        <div class="modal fade" id="dealModal1">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">修改商品</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <form id="editForm" method="post" onsubmit="return false;">
                            <div class="form-group">
                                <label>商品编号</label>
                                <input type="text" name="goodsId1" id="goodsId1" class="form-control" readonly>
                            </div>
                            <div class="form-group">
                                <label>商品</label>
                                <input type="text" name="goodsName1" id="goodsName1" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>商品价格</label>
                                <input type="text" name="price1" id="price1" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>商品图片</label>
                                <input type="text" name="pImage1" id="pImage1" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>商品分类</label>
                                <input type="text" name="pDesc1" id="pDesc1" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>商品种类</label>
                                <input type="text" name="category1" id="category1" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>状态</label>
                                <input type="text" name="state1" id="state1" class="form-control">
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="doDeal1()">保存修改</button>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready( function () {
            $('#table_id_example').DataTable();
        } );
    </script>
    <script>

        //添加操作
        function add() {
            $("#dealModal").modal("show");
        }
        //修改操作
        function edit(id) {
            $("#dealModal1").modal("show");
            $("#goodsId1").val($("#b_" + id + " .goodsId").text());
            $("#goodsName1").val($("#b_" + id + " .goodsName").text());
            $("#price1").val($("#b_" + id + " .price").text());
            $("#pImage1").val($("#b_" + id + " .pImage").text());
            $("#pDesc1").val($("#b_" + id + " .pDesc").text());
            $("#category1").val($("#b_" + id + " .category").text());
            $("#state1").val($("#b_" + id + " .state").text());
        }
        //删除操作
        function delGoods(id) {
            if (confirm("你真的要删除吗？")){
                location.href="${pageContext.request.contextPath}/shopZhl/delete?goodsId="+id;
            }
        }
        function doDeal() {
            $.ajax({
                url:"insert",
                method:"post",
                data:{
                    goodsName:$("#goodsName").val(),
                    price:$("#price").val(),
                    pImage:$("#pImage").val(),
                    pDesc:$("#pDesc").val(),
                    category:$("#category").val(),
                    state:$("#state").val(),
                },
                success:function (data) {
                    console.log(data);
                    if(data != null) {
                        alert("修改成功");
                        location.reload();
                    }
                    else alert("修改失败");
                },
                error:function (e) {
                    console.log(e);
                    console.log("通讯错误");
                }
            });
            <%--location.href="${pageContext.request.contextPath}/shop/insert";--%>
        }
        function doDeal1() {
            $.ajax({
                url:"edit",
                method:"post",
                data:{
                    goodsId:$("#goodsId1").val(),
                    goodsName:$("#goodsName1").val(),
                    price:$("#price1").val(),
                    pImage:$("#pImage1").val(),
                    pDesc:$("#pDesc1").val(),
                    category:$("#category1").val(),
                    state:$("#state1").val(),
                },
                success:function (data) {
                    console.log(data);
                    if(data != null) {
                        alert("修改成功");
                        location.reload();
                    }
                    else alert("修改失败");
                },
                error:function (e) {
                    console.log(e);
                    console.log("通讯错误");
                }
            });
        }
    </script>
</body>
</html>
